<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    back
    :title="dynamicTitle"
    :showTop="dynamicTitle"
    :bg-color="dynamicColor"
    :dark="loaded ? false : true"
    :callBackUrl="gotoMyTabUrl"
    :hideSafeArea="true"
  >
    <view class="wrapper" :style="'padding-top:' + navHeight + 'px;'">
      <view class="top-title"> 新高考选科 </view>
      <view class="title-desc">查看选科开设院校、专业、职业</view>
      <view class="menu-list">
        <view
          class="menu-list-item"
          v-for="(menuItem, menuIndex) in menuList"
          :key="menuIndex"
          @click="gotoPage(menuItem.jumpUrl)"
        >
          <view class="menu-list-item-icon">
            <image :src="menuItem.icon" class="icon"></image>
          </view>
          <view class="menu-list-item-info">
            <view class="menu-list-item-title">{{ menuItem.title }}</view>
            <view class="menu-list-item-desc">{{ menuItem.desc }}</view>
          </view>
        </view>
      </view>
      <view class="result-list">
        <view class="title">
          <view class="titleContent">
            <view class="blue-flame"></view>
            <span>科目组合专业匹配率</span>
          </view>
          <span class="titleDesc">专业匹配率</span>
        </view>
        <view :class="{ 'result-list-content': true, expand: subjectExpand }">
          <view
            :class="
              index == resultList.length - 1
                ? 'result-item-no-border'
                : 'result-item'
            "
            v-for="(item, index) in resultList"
            :key="index"
            @click="jumpToSearchMajor(item)"
          >
            <view class="left-result">
              <view class="top">
                <view>{{ item.subjectTypeDesc }}</view>
                <view class="job-name">{{ item.labelTitle }}</view>
              </view>
              <view class="bottom">
                {{ item.professionNum }}个专业、{{ item.collegeNum }}所院校
              </view>
            </view>
            <view class="right-result">
              <view class="circle-progress"
                >{{ item.professionMatchRate }}%</view
              >
            </view>
          </view>
        </view>
        <view class="expand-button" @click="subjectExpand = !subjectExpand">
          <view class="expand-button-text">{{
            subjectExpand ? '收起' : '展开更多'
          }}</view>
          <view
            :class="{ 'expand-button-icon': true, rotate: subjectExpand }"
          ></view>
          <view v-if="!subjectExpand" class="expand-button-mask"></view>
        </view>
      </view>
      <view class="position-result-list">
        <view class="title">
          <view class="blue-flame"></view>
          <span>科目组合匹配热门职业</span>
        </view>
        <view
          :class="{
            'position-result-list-content': true,
            expand: positionExpand
          }"
        >
          <view
            :class="
              index == hotCombinationList.length - 1
                ? 'position-result-item-no-border'
                : 'position-result-item'
            "
            v-for="(item, index) in hotCombinationList"
            :key="index"
            @click="handleClickHotItem(item)"
          >
            <view class="left-result">
              <view class="top">
                <view>{{ item.positionName }}</view>
              </view>
              <view class="subject-list">
                <view
                  class="subject-name"
                  v-for="tag in item.combinationSubjectList"
                  :key="tag.subjectTypeName"
                >
                  {{ tag.subjectTypeName }}</view
                >
              </view>
              <view class="bottom">
                {{ item.professionNum }}个专业、{{ item.collegeNum }}所院校
              </view>
            </view>
          </view>
        </view>
        <view class="expand-button" @click="positionExpand = !positionExpand">
          <view class="expand-button-text">{{
            positionExpand ? '收起' : '展开更多'
          }}</view>
          <view
            :class="{ 'expand-button-icon': true, rotate: positionExpand }"
          ></view>
          <view v-if="!subjectExpand" class="expand-button-mask"></view>
        </view>
      </view>
    </view>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import { cardRegist,addBuryingPoint } from '@/api/modules/career';
import {
  getAllProfessionMatchRate,
  hotCombinationSubjectPosition
} from '@/api/modules/gk';
import ShareMixin from '@/mixins/share';
import LoginDialog from '@/components/LoginDialog';
const classMap = new Map();
classMap.set('物理', '11');
classMap.set('历史', '12');
classMap.set('生物', '13');
classMap.set('化学', '14');
classMap.set('政治', '15');
classMap.set('地理', '16');
export default {
  name: 'selectMenu',
  mixins: [ShareMixin],
  components: {
    LoginDialog
  },
  data() {
    return {
      personId: '',
      shareTitle: '震惊！同分数段的同学，靠选科组合提前锁定百万年薪赛道',
      sharePath:
        '/pagesSub/nationalCollegeEntranceExamination/selectMenu/index?where=share',
      imageUrl:
        'https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png',
      dynamicTitle: '',
      dynamicColor: '',
      subjectExpand: false,
      positionExpand: false,
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      navHeight: getApp().globalData.navHeight,
      resultList: [
        {
          subjectTypeDesc: '物理、化学、生物',
          labelTitle: '从政组合',
          professionNum: '105', // 专业数量
          collegeNum: '100', // 学校数量
          professionMatchRate: '68.52' // 百分比
        },
        {
          subjectTypeDesc: '物理、化学、生物',
          labelTitle: '从政组合',
          professionNum: '105', // 专业数量
          collegeNum: '100', // 学校数量
          professionMatchRate: '88.52' // 百分比
        },
        {
          subjectTypeDesc: '物理、化学、生物',
          labelTitle: '从政组合',
          professionNum: '105', // 专业数量
          collegeNum: '100', // 学校数量
          professionMatchRate: '58.52' // 百分比
        },
        {
          subjectTypeDesc: '物理、化学、生物',
          labelTitle: '从政组合',
          professionNum: '105', // 专业数量
          collegeNum: '100', // 学校数量
          professionMatchRate: '78.52' // 百分比
        },
        {
          subjectTypeDesc: '物理、化学、生物',
          labelTitle: '从政组合',
          professionNum: '105', // 专业数量
          collegeNum: '100', // 学校数量
          professionMatchRate: '78.52' // 百分比
        },
        {
          subjectTypeDesc: '物理、化学、生物',
          labelTitle: '从政组合',
          professionNum: '105', // 专业数量
          collegeNum: '100', // 学校数量
          professionMatchRate: '48.52' // 百分比
        },
        {
          subjectTypeDesc: '物理、化学、生物',
          labelTitle: '从政组合',
          professionNum: '105', // 专业数量
          collegeNum: '100', // 学校数量
          professionMatchRate: '28.52' // 百分比
        },
        {
          subjectTypeDesc: '物理、化学、生物',
          labelTitle: '从政组合',
          professionNum: '105', // 专业数量
          collegeNum: '100', // 学校数量
          professionMatchRate: '78.52' // 百分比
        },
        {
          subjectTypeDesc: '物理、化学、生物',
          labelTitle: '从政组合',
          professionNum: '105', // 专业数量
          collegeNum: '100', // 学校数量
          professionMatchRate: '78.52' // 百分比
        },
        {
          subjectTypeDesc: '物理、化学、生物',
          labelTitle: '从政组合',
          professionNum: '105', // 专业数量
          collegeNum: '100', // 学校数量
          professionMatchRate: '78.52' // 百分比
        },
        {
          subjectTypeDesc: '物理、化学、生物',
          labelTitle: '从政组合',
          professionNum: '105', // 专业数量
          collegeNum: '100', // 学校数量
          professionMatchRate: '78.52' // 百分比
        },
        {
          subjectTypeDesc: '物理、化学、生物',
          labelTitle: '从政组合',
          professionNum: '105', // 专业数量
          collegeNum: '100', // 学校数量
          professionMatchRate: '78.52' // 百分比
        }
      ],
      hotCombinationList: [],
      menuList: [
        {
          icon: 'https://img3.job1001.com/ypMp/elan/images/saas/subjectCampus.png',
          title: '选科查专业/大学',
          desc: '根据选科，查询可以填报的院校和专业',
          jumpUrl: '/pagesSub/nationalCollegeEntranceExamination/index'
        },
        {
          icon: 'https://img3.job1001.com/ypMp/elan/images/saas/positionSubject.png',
          title: '职业查选科',
          desc: '选择意向职业，查询职业的选科组合',
          jumpUrl:
            '/pagesSub/nationalCollegeEntranceExamination/subjectChoice/index'
        }
      ]
    };
  },
  created() {
    this.getAllProfessionMatchRateFn();
    this.hotCombinationSubjectPositionFn();
    this.addBuryingPointFn(40052);
  },
  onLoad(opt) {
    this.imageUrl =
      'https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png'; //必须重新赋值
    if(opt.sellerId){
      uni.setStorageSync("sellerId",opt.sellerId);
    }
    uni.setStorageSync('isZhituUser', true); //职途用户标识（注册的时候传regSource用
  },
  onPageScroll(e) {
    //滚动改变颜色
    if (e.scrollTop >= 30) {
      this.dynamicColor = '#cfe8fd';
      this.dynamicTitle = '新高考选科';
    } else {
      this.dynamicColor = 'transparent';
      this.dynamicTitle = '';
    }
  },
  methods: {
    async cardRegistFn() {
      const params = {
        personId: this.personId,
        force: 1
      };
      params.cardType = 143;
      const res = await cardRegist(params);
      return res;
    },
    loginSuccessBack() {
      //TODO:登录成功后触发埋点和绑定职途卡
      this.personId = uni.getStorageSync('person-id').slice(2);
      this.cardRegistFn();
    },
    async getAllProfessionMatchRateFn() {
      const params = {
        csType: '1'
      };
      const res = await getAllProfessionMatchRate(params);
      if (res.code == 200) {
        this.resultList = res.data;
      }
    },
    async hotCombinationSubjectPositionFn() {
      const params = {
        pageSize: 10
      };
      const res = await hotCombinationSubjectPosition(params);
      if (res.code == 200) {
        this.hotCombinationList = res.data;
      }
    },
    jumpToSearchMajor(item) {
      if (!this.personId) {
        this.$refs.loginDialog.setVisibility(true);
        return;
      }
      const subjectList = item.subjectTypeDesc.split('、');
      const firstId = classMap.get(subjectList[0]);
      const secondId = classMap.get(subjectList[1]);
      const thirdId = classMap.get(subjectList[2]);
      const currentFirstSubject = { name: subjectList[0], id: firstId };
      const currentSecondSubjectList = [
        { name: subjectList[1], id: secondId },
        { name: subjectList[2], id: thirdId }
      ];
      uni.navigateTo({
        url:
          '/pagesSub/nationalCollegeEntranceExamination/searchMajor/index?currentFirstSubject=' +
          encodeURIComponent(JSON.stringify(currentFirstSubject)) +
          '&currentSecondSubjectList=' +
          encodeURIComponent(JSON.stringify(currentSecondSubjectList))
      });
    },
    handleClickHotItem(item) {
      if (!this.personId) {
        this.$refs.loginDialog.setVisibility(true);
        return;
      }
      uni.navigateTo({
        url: `/pagesSub/nationalCollegeEntranceExamination/jobMatch/index?positionId=${item.positionId}&positionName=${item.positionName}&professionNum=${item.professionNum}&collegeNum=${item.collegeNum}`
      });
    },
    gotoPage(url) {
      if (!this.personId) {
        this.$refs.loginDialog.setVisibility(true);
        return;
      }
      uni.navigateTo({
        url: url
      });
    },
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: "",
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        cardType: "",
        consultantId: "",
        originType: 10,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
    },
  }
};
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'AlimamaShuHeiTi-Bold';
  /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/images/saas/AlimamaShuHeiTi-Bold.ttf');
}
$img-base-person: $img-base + 'careerPath/';
.wrapper {
  background-image: url($img-base + 'careerPath/majorDetailBg.png');
  background-size: 100% 832rpx;
  background-repeat: no-repeat;
  padding: 0 32rpx;
  .top-title {
    height: 58rpx;
    font-family: 'AlimamaShuHeiTi-Bold';
    font-size: 48rpx;
    color: #222222;
    line-height: 68rpx;
    font-weight: bold;
  }
  .title-desc {
    height: 36rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #222222;
    line-height: 36rpx;
    margin-top: 30rpx;
  }
  .menu-list {
    margin-top: 46rpx;
    &-item {
      display: flex;
      width: 100%;
      background: #ffffff;
      border-radius: 10rpx;
      padding: 20rpx;
      margin-bottom: 16rpx;
      &-icon {
        width: 140rpx;
        height: 140rpx;
        background: #f4f4f4;
        .icon {
          width: 100%;
          height: 100%;
        }
      }
      &-info {
        display: flex;
        flex-direction: column;
        margin-left: 28rpx;
      }
      &-title {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 30rpx;
        color: #222222;
        line-height: 42rpx;
        margin-top: 20rpx;
      }
      &-desc {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #888888;
        line-height: 36rpx;
        margin-top: 18rpx;
      }
    }
  }
  .result-list {
    background: #ffffff;
    border-radius: 10rpx;
    padding: 26rpx 24rpx;
    margin-top: 32rpx;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12rpx;
      .titleContent {
        display: flex;
      }
      .blue-flame {
        width: 36rpx;
        height: 36rpx;
        background-image: url($img-base-person + 'gkxk/blue-flame.png');
        background-size: 100%;
        margin-right: 16rpx;
      }
      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #222222;
      }
      .titleDesc {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        line-height: 17px;
        text-align: left;
        font-style: normal;
      }
    }
    .result-list-content {
      height: 710rpx;
      overflow: hidden;
      &.expand {
        height: auto;
      }
    }
    .result-item,
    .result-item-no-border {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 142rpx;
      .left-result {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
        .top {
          display: flex;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #222222;
          font-weight: 600;
          .job-name {
            margin-left: 16rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            // width: 136rpx;
            height: 44rpx;
            background: #e7f5fe;
            border-radius: 4rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #1a69ff;
            padding: 4rpx 16rpx;
          }
        }
        .bottom {
          font-weight: 400;
          font-size: 24rpx;
          color: #888888;
        }
      }
      // .right-result {
      //   .u-progress-content {
      //     display: flex;
      //     align-items: center;
      //     justify-content: center;
      //   }
      //   .u-progress-info {
      //     //   font-size: 26rpx;
      //     //   padding-left: 12rpx;
      //     //   letter-spacing: 2rpx;
      //     font-family: AlimamaShuHeiTi;
      //     font-weight: bold;
      //     font-size: 26rpx;
      //     color: #333333;
      //   }
      // }
      .right-result {
        .circle-progress {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          color: #333333;
          font-family: 'AlimamaShuHeiTi-Bold';
          font-size: 26rpx;
          border: 8rpx solid #f7f7f7;
        }
      }
    }
    .result-item {
      border-bottom: 2rpx solid #f5f5f5;
    }
    .expand-button {
      position: relative;
      display: flex;
      justify-content: center;
      &-text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #fd6f1a;
        line-height: 36rpx;
      }
      &-icon {
        margin-left: 8rpx;
        width: 40rpx;
        height: 40rpx;
        transition: all 0.3s ease;
        background-image: url($img-base + 'careerPath/subjectOrangeArrow.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        &.rotate {
          transform: rotate(180deg);
        }
      }
      &-mask {
        position: absolute;
        top: -112rpx;
        left: 0;
        width: 100%;
        height: 112rpx;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0) 0%,
          #ffffff 100%
        );
      }
    }
  }
  .position-result-list {
    background: #ffffff;
    border-radius: 10rpx;
    padding: 26rpx 24rpx;
    margin-top: 32rpx;
    margin-bottom: 80rpx;
    .title {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 42rpx;
      .blue-flame {
        width: 36rpx;
        height: 36rpx;
        background-image: url($img-base-person + 'gkxk/blue-flame.png');
        background-size: 100%;
        margin-right: 16rpx;
      }
      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #222222;
      }
    }
    .position-result-list-content {
      height: 710rpx;
      overflow: hidden;
      &.expand {
        height: auto;
      }
    }
    .position-result-item,
    .position-result-item-no-border {
      display: flex;
      align-items: center;
      justify-content: space-between;
      // height: 142rpx;
      // padding: 48rpx 0;
      padding-bottom: 48rpx;
      margin-bottom: 10rpx;
      &:first-of-type {
        // padding-top: 30rpx;
      }
      .left-result {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
        .top {
          display: flex;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #222222;
          font-weight: 600;
          margin-bottom: 14rpx;
        }
        .subject-list {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 24rpx;
          .subject-name {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-right: 12rpx;
            width: 136rpx;
            height: 44rpx;
            background: #e7f5fe;
            border-radius: 4rpx;
            font-weight: 400;
            font-size: 26rpx;
            color: #1a69ff;
          }
        }
        .bottom {
          font-weight: 400;
          font-size: 26rpx;
          color: #888888;
        }
      }
      .right-result {
        .u-progress-content {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .u-progress-info {
          //   font-size: 26rpx;
          //   padding-left: 12rpx;
          //   letter-spacing: 2rpx;
          font-family: D-DIN-PRO, D-DIN-PRO;
          font-weight: bold;
          font-size: 26rpx;
          color: #333333;
        }
      }
    }
    .position-result-item {
      border-bottom: 2rpx solid #f5f5f5;
    }
    .expand-button {
      position: relative;
      display: flex;
      justify-content: center;
      &-text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #fd6f1a;
        line-height: 36rpx;
      }
      &-icon {
        margin-left: 8rpx;
        width: 40rpx;
        height: 40rpx;
        transition: all 0.3s ease;
        background-image: url($img-base + 'careerPath/subjectOrangeArrow.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        &.rotate {
          transform: rotate(180deg);
        }
      }
      &-mask {
        position: absolute;
        top: -112rpx;
        left: 0;
        width: 100%;
        height: 112rpx;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0) 0%,
          #ffffff 100%
        );
      }
    }
  }
}
</style>
